<template>
	<view>
		<cu-custom bgColor="bg-white">
			<block slot="right">
				<view class="color-100 bar-left " style="display: flex;">
					<text  class="left-text" style="margin-left: 15px;">消息</text>
					<view class="cu-tag badge"  v-if="unread_msg_count_all > 0" >{{unread_msg_count_all > 100 ? '99+' :unread_msg_count_all }}</view>
				</view>
			</block>
		</cu-custom>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			
			<view class="empty" v-if="conversation.length ===0" >
				<view class="empty-img padding">
					<image src="../../static/message/empty.png"></image>
				</view>
				<view class="empty-desc">
					<text >暂无消息，快来寻找你感兴趣的好友聊天吧！</text>
				</view>
			</view>
			
			
			<view 
				class="cu-list menu-avatar margin-bottom-60"
				 
			>
				<view 
					class="cu-item"
					:class="modalName=='move-box-'+ index?'move-cur':''" 
					v-for="(item,index) in conversation"
					:key="index"
					@touchstart="ListTouchStart" 
					@touchmove="ListTouchMove"
					@touchend="ListTouchEnd" 
					
					:data-target="'move-box-' + index"
				>
					<view class="cu-avatar round lg" :style="[{background: 'url('+item.avatar+')'}]" @tap="NavTo(index)">
						<view class="cu-tag badge"  v-if="item.unread_msg_count > 0">{{item.unread_msg_count > 100 ? '99+' :item.unread_msg_count }}</view>
					</view>
					<view class="content" @tap="NavTo(index)">
						<view class="text-grey">{{item.nickName}}</view>
						<view class="text-gray text-sm">
							<text class=" text-grey  margin-right-xs">{{item.content}}</text>
							<!-- 暂无消息 -->
						</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">{{item.time}}</view>
						
					</view>
					<view class="move">
						<!-- <view class="bg-grey">置顶</view> -->
						<view class="bg-red" @click="deleteConversation(item)">删除</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex';
	export default {
		data() {
			return {
				modalName: null,
				listTouchDirection: null,
				
				// 未读消息的总数
				unread_msg_count_all:0
			};
		},
		computed:{
			...mapState({
				user: ({user}) => user.userInfo,
				messageList: ({message}) => message.conversations,
			}),
			
			hasLogin(){
				return this.$store.getters.hasLogin;
			},
			syncConversation(){
				return this.$store.getters.syncConversation;
			},
			conversation(){
				return this.$store.getters.conversation.reverse();
			}
		},
		watch:{
			syncConversation(n){
				if(n.length){
					this.$store.dispatch('jimGetConversation')
				}
			}
		},
		onLoad(){
			// this.show()
		},
		methods: {
			...mapActions(['getMessagesAction', 'updateConversationsAction', 'getJMConversationsAction']),
			
			show(){
				// uni.showLoading({
				// 	title: '加载中..'
				// })
				// let _this = this
				// _this.mergeConversations()
				
			},
			// 在首页 index中已经初始化极光回话列表数据
			mergeConversations(){
				this.$jjim.getConversation().then(conversation => {
					this.updateConversationsAction({conversation, message:[]});
				})
				this.countAll()
				uni.hideLoading();
			},
			NavTo(index){
				var _this = this
				var chater_info = _this.messageList[index]
				uni.setStorage({
					key:'jiguang_chater_info',
					data:chater_info
				})
				this.$jjim.resetUnreadCount(chater_info.username).then(data => {
					this.$jjim.getConversation().then(conversation => {
						this.getJMConversationsAction(conversation)
						uni.navigateTo({
							url:'/pages/message/char',
							animationDuration:300
						})
					})
				})
				
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			
			countAll() {
				let sum = this.messageList.reduce(function(prev, cur, index, arr) {
				    return prev + cur.unread_msg_count;
				}, 0)
				this.unread_msg_count_all = sum
			},
			// 移除会话列表
			deleteConversation(item) {
				uni.showLoading({
					title: '加载中..'
				})
				const extras = {
					type: 'remove'
				}
				const username = item.name
				this.$jjim.updateConversation(username, extras).then(data => {
					if(data.code === 0) {
						this.mergeConversations()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	image{
		width: 100%;
		height: 100%;
	}
	.bar-left {
		position: absolute;
		.left-text {
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 21px;
			color: #333333;
		}
		.left-right {
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 21px;
			color: #333333;
		}
	}
	
	.margin-bottom-60{
		margin-bottom: 60px;
	}
	.cu-avatar{
		background-size: 100% 100% !important;
		background-color:#EEE !important;
	}
	.empty{
		width: 100%;
		margin-top: 67px;
		&-img{
			width: 230px;
			height: 122px;
			margin: auto;
		}
		&-desc{
			
			margin: auto;
			text-align: center;
			text{
				font-size: 10px;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 14px;
				color: #666666;
			}
		}
	}
</style>
